<template>
  <div style="padding: 0 20px;">
    <!-- 导航栏部分 -->
    <div style="background-color: rgb(84, 92, 100); margin-bottom: 10px" >
      <div style="text-align: center">
        <el-row :gutter="20" style="padding: 10px 10px">
          <!-- 搜索框 -->
          <el-input
            v-model="searchFrom.keywords"
            size="small"
            style="width: 260px"
            placeholder="通过名称、别名搜索..."
          ></el-input>
          <!-- 搜索按钮 -->
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="searchInformationByKeyWord()"
          >搜索</el-button>
        </el-row>
      </div>
    </div>
    <div style="padding: 10px;width: 100%;height:18px">
      <span style="float: left" v-if="type==='selectDate'" class="zjbutton" @click="gotoIndex">
        返回搜索
      </span>
      <span style="float: left" v-else class="zjbutton" @click="gotoPer">
        返回个人中心
      </span>
      <span style="float: right;padding-right: 20px">
        <el-button size="mini" :type="bottonData.isLike ? 'primary':''" @click="clickLike">点赞</el-button>
        <el-button size="mini" :type="bottonData.isNolike ? 'primary':''" @click="clickNoLike">点踩</el-button>
        <el-button size="mini" :type="bottonData.isCollection ? 'primary':''" @click="clickColl">收藏</el-button>
      </span>
    </div>
    <div style="padding:0 20px">
      <el-row>
        <el-col :span="4">
          <el-menu :default-active="'1'" :active="activeIndex" @select="handleSelect" class="el-menu-vertical-demo" mode="horizontal">
            <el-menu-item index="1">简介</el-menu-item>
            <el-menu-item  index="2">生活习性</el-menu-item >
            <el-menu-item index="3">种群现状</el-menu-item>
            <el-menu-item index="4">外形特征</el-menu-item>
            <el-menu-item index="5">生长繁殖</el-menu-item>
            <el-menu-item index="6">疾病传播</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="20">
          <div v-if="activeIndex==='1'">
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">中文名</el-col>
                  <el-col :span="20">{{detail.name}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">别名</el-col>
                  <el-col :span="20">{{detail.bname}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">界</el-col>
                  <el-col :span="20">{{detail.kingdom}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">门</el-col>
                  <el-col :span="20">{{detail.phylum}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">亚门</el-col>
                  <el-col :span="20">{{detail.subPhylum}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">纲</el-col>
                  <el-col :span="20">{{detail.gclass}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">亚纲</el-col>
                  <el-col :span="20">{{detail.subClass}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">目</el-col>
                  <el-col :span="20">{{detail.orderA}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">亚目</el-col>
                  <el-col :span="20">{{detail.subOrder}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">科</el-col>
                  <el-col :span="20">{{detail.family}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">亚科</el-col>
                  <el-col :span="20">{{detail.subFamily}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">属</el-col>
                  <el-col :span="20">{{detail.genus}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">亚属</el-col>
                  <el-col :span="20">{{detail.subGenus}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">种</el-col>
                  <el-col :span="20">{{detail.species}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">亚种</el-col>
                  <el-col :span="20">{{detail.subSpecies}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">分布区域</el-col>
                  <el-col :span="20">{{detail.distributionArea}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">保护级别</el-col>
                  <el-col :span="20">{{detail.protectionLevel}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">二名法</el-col>
                  <el-col :span="20">{{detail.binomialNomenclature}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">爱吃食物</el-col>
                  <el-col :span="20">{{detail.food}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">寿命</el-col>
                  <el-col :span="20">{{detail.lifeTime}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">繁殖速度</el-col>
                  <el-col :span="20">{{detail.breed}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">对人影响</el-col>
                  <el-col :span="20">{{detail.affect}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">颜色</el-col>
                  <el-col :span="20">{{detail.colour}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 10px" class='rowStyle'>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">历史</el-col>
                  <el-col :span="20">{{detail.pastRecords}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="4">天敌</el-col>
                  <el-col :span="20">{{detail.naturalEnemy}}</el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
          <div v-if="activeIndex==='2'">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{detail.lifeHabit}}</span>
          </div>
          <div v-if="activeIndex==='3'">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{detail.populationStatus}}</span>
          </div>
          <div v-if="activeIndex==='4'">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{detail.feature}}</span>
          </div>
          <div v-if="activeIndex==='5'">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{detail.growthReproduction}}</span>
          </div>
          <div v-if="activeIndex==='6'">
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{detail.pathophoresis}}</span>
          </div>
        </el-col>
      </el-row>
      <div></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SelectDetail',
    data () {
      return {
        type:'selectDate',
        bottonData:{
          isLike:0,
          isNolike:0,
          isCollection:0
        },
        activeIndex:'1',
        key:'',
        searchFrom:{
          keywords:''
        },
        datalist:[],
        detail:{}
      }
    },
    watch:{
      detail:{
        handler() {
          this.getClickLike()
          this.getClickNOLike()
          this.getColl()
        },
        deep:true
      }
    },
    methods: {
      clickLike(){
        let user=JSON.parse( window.localStorage.getItem('userInfo') ),url=''
        var _this = this
        if(!this.bottonData.isLike){
          url='/giveLike'
        }else{
          url='/giveCancelLike'
        }
        this.$axios
          .post(url, {
            worksId: _this.detail.name,
            likeUser:user.username,
            authorId:_this.detail.authorId
          })
          .then(({data}) => {
            this.getClickLike()
            this.getClickNOLike()
          })
      },
      clickNoLike(){
        let user=JSON.parse( window.localStorage.getItem('userInfo') ),url=''
        var _this = this
        if(!this.bottonData.isNolike){
          url='/noGiveLike'
        }else{
          url='/noGiveCancelLike'
        }
        this.$axios
          .post(url, {
            worksId: _this.detail.name,
            likeUser:user.username,
            authorId:_this.detail.authorId
          })
          .then(({data}) => {
            this.getClickLike()
            this.getClickNOLike()
          })
      },
      clickColl(){
        let user=JSON.parse( window.localStorage.getItem('userInfo') ),url=''
        var _this = this
        if(!this.bottonData.isCollection){
          url='/addCollection'
        }else{
          url='/noAddCollection'
        }
        this.$axios
          .post(url, {
            worksId: _this.detail.name,
            collectionUser:user.username,
          })
          .then(({data}) => {
            this.getColl()
          })
      },
      //点赞
      getClickLike(){
        let user=JSON.parse( window.localStorage.getItem('userInfo') )
        console.log(user);
        var _this = this
        this.$axios
          .post('/isGiveLike', {
            worksId: _this.detail.name,
            likeUser:user.username,
            authorId:_this.detail.authorId
          })
          .then(({data}) => {
            this.bottonData.isLike=data.data
            console.log(data,'点赞');
          })
      },
      //点踩
      getClickNOLike(){
        let user=JSON.parse( window.localStorage.getItem('userInfo') )
        var _this = this
        this.$axios
          .post('/noIsGiveLike', {
            worksId: _this.detail.name,
            likeUser:user.username,
            authorId:_this.detail.authorId
          })
          .then(({data}) => {
            this.bottonData.isNolike=data.data
            console.log(data,'点踩');
          })
      },
      //收藏
      getColl(){
        let user=JSON.parse( window.localStorage.getItem('userInfo') )
        var _this = this
        this.$axios
          .post('/isCollection', {
            worksId: _this.detail.name,
            collectionUser:user.username,
          })
          .then(({data}) => {
            this.bottonData.isCollection=data.data
            console.log(data,'收藏');
          })
      },

      handleSelect(key, keyPath) {
        this.activeIndex=key
      },
      isEmpty (value) {
        if (typeof value === 'undefined') {
          return true
        } else if (value === null) {
          return true
        } else if (typeof value === 'string' && value === '') {
          return true
        } else if (typeof value === 'number' && isNaN(value)) {
          return true
        } else if (Array.isArray(value) && value.length === 0) {
          return true
        } else if (value instanceof Number && isNaN(value)) {
          return true
        } else if (
          value.toString() === '[object Object]' &&
          Object.keys(value).length === 0
        ) {
          return true
        } else {
          return false
        }
      },
      // 搜索按钮请求后端
      searchInformationByKeyWord () {
        if (this.isEmpty(this.searchFrom.keywords)) {
          this.$message.warning('请输入关键词')
          return
        }
        var _this = this
        this.$axios
          .post('/search', {
            keywords: this.searchFrom.keywords
          })
          .then(({data}) => {
            if (this.isEmpty(data.data.list)) {
              this.$message.warning('未查找到该信息！')
              return
            }
            this.selectData(data.data.list)
          })
      },
      selectData (list) {
        this.$router.push({ name: 'SelectData', query: {list,key:this.searchFrom.keywords} })
      },
      gotoIndex(){
        this.$router.push({name: 'SelectData',query: {list:this.datalist,key:this.key}})
      },
      gotoPer(){
        this.$router.push({ name: 'PersonalCenter' })
      },
      getData(){
        var _this = this
        let name=this.$route.query.selectData.worksId,userName=this.$route.query.selectData.collectionUser
        console.log(this.$route.query.selectData,'this.$route.query.selectData');
        let user=JSON.parse( window.localStorage.getItem('userInfo') )
        this.$axios
          .post('/queryAudit', {
            name: name,
            authorId:user.username
          })
          .then(({data}) => {
            this.detail=data.data
          })
      }
    },
    mounted() {
      this.type=this.$route.query.type
      if(this.type==='selectDate'){
        this.datalist=this.$route.query.list
        this.key=this.$route.query.key
        this.detail=this.$route.query.detail
      }else{
        if(this.$route.query.geyDatetype==='1'){
          this.getData()
        }else{
          console.log(this.$route.query.selectData);
          this.detail=this.$route.query.selectData
        }
      }
    }
  }
</script>
<style scoped>
  .zjbutton:hover{
    color: #409eff;
    cursor: pointer;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
    min-height: 400px;
    border-right: 1px dashed black;
  }
  .rowStyle{
    border-bottom: 1px dashed black;
    padding: 5px;
  }
</style>
